<template>
  <div class="commonCollapse">
    <div class="collapseHead">
      <span class="left" @click="show = !show">
        <i
          class="el-collapse-item__arrow el-icon-arrow-right"
          :class="show ? 'is-active' : ''"
        ></i>
        <span class="title" v-html="title"></span>
      </span>
      <span class="right">
        <slot name="headRight"></slot>
      </span>
    </div>
    <el-collapse-transition>
      <div class="collapseTransitionContent" v-show="show">
        <slot name="content"></slot>
      </div>
    </el-collapse-transition>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      default: "",
    },
  },
  data() {
    return {
      show: true,
    };
  },
};
</script>
<style scoped>
.commonCollapse .collapseHead {
  margin-bottom: 8px;
  color: #21252e;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.commonCollapse .collapseHead i {
  font-size: 20px;
  margin: 0;
  font-weight: 600;
}
.commonCollapse .collapseHead title {
  margin-left: 10px;
  font-size: 18px;
  font-weight: 550;
}
</style>
